<template>
  <div>
    <h4>{{item.Subject}}</h4>
    <div class="list">
      <dl v-for="(ele,index) in item.Content" :key="index" @click="active(index)" :class="[{'active':index == Ind},{'ccc':item.Layout == 'border'}]">
        <dt v-if="ele.Icon">
          <img :src=ele.Icon alt=""></dt>
        <dd>{{ele.Label}}</dd>
      </dl>
    </div>
  </div>
</template>

<script>
import grandson from "./grandson.vue"
export default {
  props:{
    item:{
      type:Object,
    }
  },
  data () {
    return {
      Ind:0
    }
  },
  methods:{
    active(ind){
      this.Ind = ind
      
      this.$emit("active",ind)
    }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  .list{
    display: flex;
      flex-wrap: wrap;
    dl{
      width: 24%;
      margin: 15px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      dt{
        width: 100%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      &.ccc{
        border: 1px solid #ccc
      }
      &.active{
        border: 1px solid red
      }
    }
  }
</style>
